<template>
  <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <el-menu-item index="/"><a href="/">Home</a></el-menu-item>
    <el-menu-item index="/form"><a href="/form">Form</a></el-menu-item>
    <el-menu-item index="/table"><a href="/table">table</a></el-menu-item>
    <el-menu-item index="/about"><a href="/about">about</a></el-menu-item>
    <el-menu-item index="/provide-inject"><a href="/provide-inject">provide-inject</a></el-menu-item>
    <el-menu-item index="/ailabeluse"><a href="/ailabeluse">ailabeluse</a></el-menu-item>
    <el-menu-item index="/tree"><a href="/tree">tree</a></el-menu-item>
  </el-menu>
  <!-- <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
    <RouterLink to="/table">Table</RouterLink>
    <RouterLink to="/form">Form</RouterLink> -->
  <RouterView />
</template>
<script>

import { ref } from 'vue'

export default {
  data() {
    return {
      activeIndex: '1'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$router.push(key);
    }
  }
}
</script>